<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
		<style type="text/css">
			.aui-list .aui-list-item i.aui-iconfont {
				-webkit-align-self: center;
				align-self: center;
				font-size: 18px;
			}
		</style>
	</head>
	<body>
	<div class="aui-searchbar" id="search">
			<div class="aui-searchbar-input aui-border-radius">
				<i class="aui-iconfont aui-icon-search"></i>
				<input type="search" placeholder="请输入搜索内容" id="search-input">
				<div class="aui-searchbar-clear-btn">
					<i class="aui-iconfont aui-icon-close"></i>
				</div>
			</div>
			<div class="aui-searchbar-btn" tapmode>
				取消
			</div>
		</div>
		<section class="aui-content">
			<ul class="aui-list aui-media-list" id="nice-articles">
			</ul>
		</section>
		<section class="aui-content" id="list"></section>
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<!-- <script type="text/javascript"  src="../js/aui-search.js"></script> -->
	
	<script type="text/javascript">
	
		//初始方法
		$(function() {
			getPage(pageNumber, pageSize);
		});
		
		
		//当前初始页
		var pageNumber = 1;
		//每页显示多少条
		var pageSize = 10;
		var countSize = 0;
		function getPage(pageNumber, pageSize) {
			$.ajax({
				url : '${pageContext.request.contextPath}/appcrm/appCustomerList.do?pageNo=' + pageNumber + '&pageSize=' + pageSize,
				type : "POST",
				dataType : "json",
				success : function(data) {
 					var html="";
					if (data.code == "0" ) {
						if (typeof(data.pageInfo.list) != "undefined" && data.pageInfo.list != "" ) {
				
 						var da = data.pageInfo.list;
						for (var i = 0; i < da.length; i++) {
						html += '<li class="aui-list-item aui-list-item-middle" onclick="openDetailed(\'' + da[i].customerId + '\')"><div class="aui-media-list-item-inner">';
							if (da[i].picture != null && da[i].picture != "") {
								html += '<div class="aui-list-item-media" style="width: 3rem;"><img src=" ../ ' +da[i].picture + '" class="aui-img-round aui-list-img-sm"></div>';
							} else {
								html += '<div class="aui-list-item-media" style="width: 3rem;"><img src="../img/bing.png" class="aui-img-round aui-list-img-sm"></div>';
							}
							
							html += '<div class="aui-list-item-inner aui-list-item-arrow">'
							if (da[i].customerName != null && da[i].customerName != "") {
								html += '<div class="aui-list-item-text"><div class="aui-list-item-title aui-font-size-14">' + da[i].customerName + '</div><div class="aui-list-item-right"></div></div>'
							}
							
							if (da[i].mobileNumber != null && da[i].mobileNumber != "") {
								html += '<div class="aui-list-item-text">' + da[i].mobileNumber + '</div>'
							}
							
							html += "</div></div></li>";
						}
						
						//countSize = da.total;
						//复制总记录数
					} else {
					
						$("#list").html("<div style='width:100%;text-align:center;color:#999;padding:10px 0;'>暂无数据！</div>");
					}
					//alert(html);
					$("#nice-articles").html(html);
					}
				}
			});
		}
		
		//打开详细
		function openDetailed(id) {
			window.location.href="${pageContext.request.contextPath}/wap/frame_client_detailed.do?id="+id;
		}	

	</script>
</html>